import React,{Component} from 'react';
import{
Button,
ScrollView,
StyleSheet,
Image,
View,
Text,
FlatList,
TouchableHighlight,
Dimensions,
Alert,
ActivityIndicator
} from 'react-native';
import { SafeAreaView} from 'react-navigation';
import Datajson from '../../datesource/data.json'
//引入图标
import Icon from 'react-native-vector-icons/FontAwesome';
//import  FontAwesome from 'react-native-vector-icons/FontAwesome';
//获取宽高
var {height, width} = Dimensions.get('window')
var  cacheResult = {
  nextPage:1,
  items:[],
  total:0
}
//导入异步获取数据
import NetUitl from '../../common/fetchcomponent';
//设置工具列表页面
//class AllContactsScreen extends Component
class MyListItem extends Component{
  _onPress = ()=>{
    this.props.onPressItem(this.props.id)
  }

  render(){
    return (
      <TouchableHighlight onPress={this._onPress.bind(this)}>
        <View style={styles.item}>
          <Text style={styles.title}>{this.props.title}</Text>
         <Image
          style={styles.thumb}
          source={{uri:this.props.cover}}
          >
          </Image>
          <Icon
            name={'play-circle'}
            size={28}
            style={styles.play}  
          />
          <View style={styles.itemFooter}>
            <View style={styles.handleBox}>
              <Icon.Button
                name={'heart-o'}
                size={18}
                color={'#dedede'}
                backgroundColor={'transparent'}
              ></Icon.Button>
              <Text style={styles.handleText}>喜欢</Text>
            </View>
            <View style={styles.handleBox}>
              <Icon.Button
                name={'comments'}
                size={18}
                color={'#dedede'}
                backgroundColor={'transparent'}
              ></Icon.Button>
              <Text style={styles.handleText}>评论</Text>
            </View>
          </View>  
        </View>
      </TouchableHighlight>
      
    )
  }
}
class TooScreen extends Component{
  constructor(props){
    super(props);
    this.state = {
      dataInfo : Datajson.subjects,
      isRefreshing:false,
      selected: (new Map(): Map<string, boolean>)
    }
  }
  componentDidMount() {
    //http://192.168.3.50/public/caiji/Appfetch/get?id=3106
    const geturl= 'http://192.168.3.50/public/caiji/Appfetch/get?id=3103'
    const posturl = 'http://192.168.3.50/public/caiji/Appfetch/post'
    let params = {'id':'3103'}
    console.log(Datajson);
    //console.log(JSON.stringify(params))
    // NetUitl.get(geturl,'',function(data){
    //   //alert(JSON.stringify(data))
    // })
    // NetUitl.post(posturl,params,'',function(data){
    //   //alert(JSON.stringify(data))
    // })
  }
  _onPressItem = (id:string)=>(
    this.setState((state)=>{
      const selected = new Map(state.selected)
      selected.set(id,!selected.get(id))
      return {selected}
    })
  )
  _renderItem = ({item})=>(
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem.bind(this)}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
    />
  )

  //上拉加载
  _endReach = ({item})=>{
    if(!this._hasMore()||this.state.isRefreshing){
      return 
    }
    const url = ''
    const data = []

    NetUitl.post(url,data).then((data)=>{
      items = items.concat(data.data)
      //缓存数据和条数
      cacheResult.itms = items
      cacheResult.total = data.total
      //赋值给state
      this.setState({
        isRefreshing:false,
        dataInfo:items
      })
      this.state.dataInfo = cacheResult.itms
    }).catch((error)=>{
      this.setState({
        isRefreshing:false
      })
    })
  }
  //数据是否加载完成
  _hasMore (){
    return true
   //return cacheResult.itme.length !== cacheResult.total 
  }
  //增加底部条数
  _listFooter(){
    this._hasMore()
    if(!this._hasMore() && cacheResult.total!==0){
      return (
        <View style = {styles.loadingMore}>
          <Text style={styles.loadingText}>没有更多</Text>
        </View>
      )
    }else{
      return (
        <ActivityIndicator
          //animating={this.state.animating}
          style={styles.loadingMore}
          size="large"
        />
      )
    } 
  }
  _onFresh(){
    alert(1)
    // if(this._hasMore() || this.state.isRefreshing){
    //   return
    // }
    // this.setState({
    //   isRefreshing:true
    // })
  }
  _keyExtractor = (item,index)=>item.id
  render(){
    return(
      <ScrollView>
      <SafeAreaView forceInset={{ horizontal: 'always' }}>
        <FlatList
          data={this.state.dataInfo}
          extraData = {this.state}
          keyExtractor={this._keyExtractor.bind(this)}
          renderItem = {this._renderItem.bind(this)}
          onEndReached = {this._endReach.bind(this)}
          onEndReachedThreshold = {20}
          ListFooterComponent = {this._listFooter.bind(this)}
          showsVerticalScrollIndicator = {false}

          refreshing = {this.state.isRefreshing}
          onRefresh = {this._onFresh.bind(this)}
          tintColor = '#ff6600'
          title = '拼命加载中！'
  
          
          
        />
      </SafeAreaView>
    </ScrollView>
    );
    
  }
}
const styles = StyleSheet.create({
  item:{
    width:width,
    marginBottom:10,
    backgroundColor:'#fff'
  },
  thumb:{
    width:width,
    height:width*0.5,
    resizeMode:'cover'
  },
  title:{
    padding:10,
    fontSize:18,
    color:'#333',
  },
  itemFooter:{
    flexDirection:'row',
    justifyContent:'center',
    backgroundColor:'#eee'
  },
  handleBox:{
    padding:10,
    flexDirection:'row',
    width:width/2-0.5,
    justifyContent:'center',
    backgroundColor:'#fff'
  },
  play:{
    position:'absolute',
    bottom:14,
    width:46,
    height:46,
    paddingTop:9,
    paddingLeft:18,
    backgroundColor:'transparent',
    borderColor:'#fff',
    borderRadius:23,
    
  },
  handleText:{
    marginTop:8,
    //alignItems:'center'
  }


})
export default TooScreen;